import React, { useState, useEffect } from 'react';
import { Button, Form, DatePicker, TimePicker, InputNumber, Card, message, Spin } from 'antd';
import moment from 'moment';
import PropStyles from './index.less';
import { AirConfiguration } from '../common/types';
import { DefaultConfig } from '../common/plug-config';


function Index() {
    const [loading, setLoading] = useState<boolean>();
    const [emailMessage, setEmailMessage] = useState<boolean>();
    useEffect(() => {
        setLoading(true);
        //@ts-ignore
        chrome.storage.local.get(['options'], function ({ options }: { options: AirConfiguration }) {
            if (options && typeof (options) === 'object') {
                setEmailMessage(!!options.emailMessage);
            }
            setLoading(false);

        });
    }, [])
    function handleLink() {
        window.open('http://www.ceair.com/')
    }
    return <Card title="快速操作">
        <Spin spinning={loading}>
            <Button onClick={handleLink}>点点我跳转</Button>
            <Button onClick={() => {
                chrome.storage.local.get(['options'], function ({ options }: { options?: AirConfiguration }) {
                    console.log('prop 用户配置：', options);
                    chrome.storage.local.set({ options: { ...(options || DefaultConfig), emailMessage: !emailMessage } }, function () {
                        message.success('设置成功')
                        setEmailMessage(!emailMessage);
                    });

                });
            }}>{!emailMessage ? '开启邮件' : '关闭邮件'}</Button>
        </Spin>
    </Card>

}

export default Index;